class UPlayAnimate {
    constructor(rootElement, userSettings,callback){
        this.rootElement = rootElement; 
        this.imgList = []
        var cxt = this.rootElement.getContext('2d');
        this.userSettings = {
            ...userSettings,
            cxt: cxt,
            width: rootElement.width,
            height: rootElement.height,
        }

        this.init(callback)
    }
    init(callback){
        /******
         * stepAct： 动画/画图
         * *****/ 
        const {cxt,stepAct} = this.userSettings
        cxt.fillStyle = 'rgba(255, 255, 255, 0)';
        this.loadImages((images) =>{
            this.imgList = images
            if(stepAct) {
                this.playAnimeImages(images,callback)
            }else{
                this.actScreen(images)
            }
        });
    }
    loadImages(callback){
        const {sources} = this.userSettings 
        var loadedImages = 0;
        var numImages = 0;
        var images=[];
        numImages=sources.length;
        for (var i=0,len=sources.length;i<len;i++) {
            images[i] = new Image();
            //当一张图片加载完成时执行
            images[i].onload = function(){
                //当所有图片加载完成时，执行回调函数callback
                if (++loadedImages >= numImages) {
                    callback(images);
                }
            };
            //把sources中的图片信息导入images数组
            images[i].src = sources[i]
        }
    }
    actScreen(images){
        const {cxt, width, height} = this.userSettings
        cxt.clearRect(0,0, width, height);
        cxt.fillRect(0, 0, width, height);
        cxt.drawImage(images[0], 0, 0, width, height);
    }
    playAnimeImages(images,callback){
        /******
         * step: 动画步骤 {val: 15, time: 1500}   第15张停顿1500
         * *****/ 
        const {cxt, width, height, stepAct, step, diffTimestep} = this.userSettings
        var imageNow = 0
        var rafId = null
        var imageNum=images.length;
        //当前执行时间
        var nowTime = 0;
        //记录每次动画执行结束的时间
        var lastTime = Date.now();
        //定义的动画时间差值
        var diffTime = diffTimestep||50;
        requestAnimationFrame = window.requestAnimationFrame ||
                                window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame ||
                                window.msRequestAnimationFrame || 
                                window.oRequestAnimationFrame ||
                                function(callback) { setTimeout(callback, 1000 / 60); };
        var isAct = false
        var animloop = () =>{
            if (!isAct) {
                nowTime = Date.now()
                cxt.clearRect(0,0, width, height);
                cxt.fillRect(0, 0, width, height);
                cxt.drawImage(images[imageNow], 0, 0, width, height);

                if((!step||(step&&imageNow != step.val))&&nowTime-lastTime > diffTime){
                    lastTime = nowTime
                    if(imageNow < imageNum-1){
                        imageNow++;
                    }else{
                        isAct = true
                        cancelAnimationFrame(rafId)
                        callback(rafId)
                    }
                }
                if(step && imageNow == step.val && (nowTime-lastTime) > step.time){
                    imageNow++;
                }
                rafId = (imageNow<imageNum) && requestAnimationFrame(animloop);
            }
        }
        
        animloop()
    }
    switch(callback){
        if(this.imgList.length>0){
            this.playAnimeImages(this.imgList,callback)
        }else{
            this.loadImages((images) =>{
                this.imgList = images
                this.playAnimeImages(images,callback)
            });
        }
    }
    reset(setting,callback){
        this.imgList = []
        var cxt = this.rootElement.getContext('2d');
        this.userSettings = {
            ...setting,
            cxt: cxt,
            width: this.rootElement.width,
            height: this.rootElement.height,
        }

        this.init(callback)
    }
}

export default UPlayAnimate;